Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: sku matrix ui and components #2503

Open
wants to merge 3 commits into
base: feat/sku-matrix-cubos
Choose a base branch
from

Conversation

ramondorosario-ct
Copy link
Collaborator

@ramondorosario-ct ramondorosario-ct commented Oct 15, 2024

Este PR conta com a construção dos componentes do SKUMatrix: SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar

Além dos componentes, também foi desenvolvido um SKUProvider, que gerencia todo o estado interno do SKUMatrix. Esse estado inclui abrir e fechar o SlideOver, controlar as quantidades de itens a serem adicionados ao carrinho, e retornar a lista de variações dos produtos. Para o correto funcionamento da funcionalidade do SKUMatrix, este wrapper precisa estar presente. Para evitar o uso isolado do SKUMatrixSidebar ou do SKUMatrixTrigger, há uma validação implementada no hook useSKUMatrix.

O hook useSKUMatrix, que é responsável por fazer o consumo do SKUMatrixProvider e retornar todas as propriedades, para que os componentes da cadeia possam fazer uso. A validação foi implementada dentro desse hook.

Printscreens

SKU Matrix trigger button:

SKU Matrix - Trigger Button

SKU Matrix side bar:

SKU Matrix - SKU Matrix Sidebar

feat: sku matrix ui and components
Copy link

vercel bot commented Oct 15, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
faststore-site ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 17, 2024 5:25pm

Copy link

codesandbox-ci bot commented Oct 15, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@ArthurTriis1
Copy link
Contributor

Olhando pelo link de preview as colunas Color e Size não estão parecendo. Pode dar uma olhada?

Screenshot 2024-10-16 at 14 41 17

@ArthurTriis1
Copy link
Contributor

O ideal é que a opção de "Selecionar Múltiplos"aparecesse apenas nos produtos que tem variedade, evitando evitando que a modal tenha apenas um item, consegue condicionar o aparecimento desse botão à quantidade de SkuVariations?

Oct-16-2024 14-46-46

@ramondorosario-ct
Copy link
Collaborator Author

ramondorosario-ct commented Oct 16, 2024

Olhando pelo link de preview as colunas Color e Size não estão parecendo. Pode dar uma olhada?

Screenshot 2024-10-16 at 14 41 17

Quanto a coluna das variações dos produtos, conforme discutido, deve ser configurado no admin. La no headless-cms, na seção Product Details, tem as configurações da tabela do SKU Matrix.

A configuração atual vem com 4 colunas fixas: nome do sku, estoque, preço e quantidade. É possível alterar os títulos dessas colunas.
Para demais colunas, o usuário será capaz de personalizar conforme a necessidade. Para o exemplo em questão, para habilitar os campos "cor" e "tamanho", será preciso adicionar la no admin. Na parte de coluna, tem duas informações que devem ser preenchidas:

  • Label: Titulo da coluna
  • Value: o nome da variação que quer exibir

ps: o campo value deve ser preenchido de acordo como foi cadastrado o sku

Para os campos cor e tamanho:

{
  Label: "Color",
  Value: "color"
},
{
  Label: "Size",
  Value: "size"
}

@ramondorosario-ct
Copy link
Collaborator Author

O ideal é que a opção de "Selecionar Múltiplos"aparecesse apenas nos produtos que tem variedade, evitando evitando que a modal tenha apenas um item, consegue condicionar o aparecimento desse botão à quantidade de SkuVariations?

Feito ✅

@ArthurTriis1
Copy link
Contributor

O ideal é que a opção de "Selecionar Múltiplos"aparecesse apenas nos produtos que tem variedade, evitando evitando que a modal tenha apenas um item, consegue condicionar o aparecimento desse botão à quantidade de SkuVariations?

Não acha que seria mais interessante continuar exibindo o botão, porem desabilitado e com talvez uma mensagem ao passar o mouse por cima, informando que está desabilitado pelo motivo do produto não ter variações?

Dessa forma, não daria a sensação de que não está habilitado a funcionalidade. O que acha? Remove totalmente o botão ou deixa disabled com a informação ao passar o cursor por cima?

Valeu @ramondorosario-ct! Alinhei com o designer e decidimos que seria melhor ele não aparecer mesmo, obrigado por já ter implementado, poderia atualizar o comportamento no preview?

@ArthurTriis1
Copy link
Contributor

Outro comportamento que reparamos é que quando o botão de "Add to cart" da SkuMatrix é clicado e o Mini Cart é aberto está rolando uma sobreposição do SliderOvers o ideal é que quando o "Add to cart" for clicado a SkuMatrix seja fechada, consegue implementar esse ajuste?

Oct-17-2024 12-31-52

@ramondorosario-ct
Copy link
Collaborator Author

Outro comportamento que reparamos é que quando o botão de "Add to cart" da SkuMatrix é clicado e o Mini Cart é aberto está rolando uma sobreposição do SliderOvers o ideal é que quando o "Add to cart" for clicado a SkuMatrix seja fechada, consegue implementar esse ajuste?

Feito @ArthurTriis1
Link do preview

ps: o outro ajuste ta nesse preview também. Como a cada modificação, gera um novo link, acabei não mandando ontem.

Copy link
Contributor

@ArthurTriis1 ArthurTriis1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good! ✨

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
contributing Pull request submitted by the community enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants